<html>
<head>
  <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
  <button onclick='tableToExcel()'>导出</button>
</head>
<body>
  <script>
    function tableToExcel(){
		//要导出的json数据
		var jsonData = [
		{
		  name:'路人甲',
		  phone:'123456789',
		  email:'000@123456.com'
		},
		{
		  name:'炮灰乙',
		  phone:'123456789',
		  email:'000@123456.com'
		},
		{
		  name:'土匪丙',
		  phone:'123456789',
		  email:'000@123456.com'
		},
		{
		  name:'流氓丁',
		  phone:'123456789',
		  email:'000@123456.com'
		},
		]
		//列标题，逗号隔开，每一个逗号就是隔开一个单元格
		let str = `姓名,电话,邮箱\n`;
		//增加\t为了不让表格显示科学计数法或者其他格式
		for(let i = 0 ; i < jsonData.length ; i++ ){
			for(let item in jsonData[i]){
				str+=`${jsonData[i][item] + '\t'},`;     
			}
			str+='\n';
		}
		console.log(str)
		let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
		var link = document.createElement("a");
		link.href = uri;
		link.download =  "json数据表.csv";
		document.body.appendChild(link);
link.click();
      document.body.removeChild(link);
    }

		$('.export').on('click', function(e){
      
      //- 获取页面table表格数据
      let thLs = Array.from($('table.table th')).map(v=>{return v.textContent})     // 获取表头数据
      let tdLs = Array.from($('table.table td')).map(v=>{return v.textContent})     // 获取表体数据
      let combine = thLs.concat(tdLs)   // 表头表体数据聚合
      
      //- 表格数据转csv格式
      let csv = ''
      let colWidth = 10       // 列数
      let column = []         // 列循环数据缓存
      combine.map((v,i)=>{
        column.push(v.trim())
        if((i+1)%colWidth === 0){
          csv += column.join(",")+'\n'
          column = []
        }
      })

      //- 表格导出
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv);
      let link = document.createElement("a");
      let ts = new Date()
      link.href = uri;
      link.download =  ts.getFullYear() +'/'+(ts.getMonth()+1) +'/'+ ts.getDay() + " API广告位分成帐单.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
</script>
</body>
</html>